<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../images/title-logo.png" type="image/x-icon">
    <title>简易华为商城--登录</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        body {
            background: url("../images/register.jpg");
        }


        .form {
            width: 390px;
            margin: 250px auto;
            padding: 30px 35px;
            background-color: #F1F1F3;
            border-radius: 20px;
        }

        p:first-of-type {
            color: #B5B3B5;
            margin-top: 5px;
            font-size: 14px;
            margin-bottom: 10px;
        }

        p:first-of-type a {
            color: #4187F5;
        }

        p:not(first-of-type) {
            margin-top: 30px;
            position: relative;
        }

        p:not(first-of-type) span:first-of-type {
            font-size: 12px;
            position: absolute;
            top: 42px;
            left: 50px;
        }

        label {
            height: 36px;
            line-height: 36px;
            color: #818181;
            margin-right: 10px;
        }

        input {
            width: 280px;
            height: 36px;
            border: 1px solid #E5E5E5;
            border-radius: 5px;
            padding-left: 10px;
            padding-right: 10px;
        }

        input::placeholder {
            color: #DADADB;
        }


        .btn {
            width: 100%;
            height: 48px;
            line-height: 48px;
            background: #BACFFC;
            color: white;
            font-size: 16px;
            font-family: "宋体";
            font-weight: bold;
            border: none;
            border-radius: 24px;
        }

        .ckbox {
            width: max-content;
            height: 26px;
            line-height: 26px;
            margin-left: 50px;
            margin-top: 15px;
        }

        .ckbox input {
            width: 12px;
            height: 12px;
            margin-right: 10px;
        }

        .outer {
            width: 500px;
            height: 400px;
            background: white;
            padding: 30px 20px 0;
            display: none;
            margin: 250px auto;
            border-radius: 5px;
        }

        .innerup {
            width: 480px;
            height: 230px;
            border: 2px solid black;
            margin: 5px auto;
            position: relative;
            background: url("../images/2.jpg");
            background-size: 480px 230px;
        }

        .box1 {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            border: 1px solid rgba(255, 255, 255);
        }

        .box2 {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .box2-inner {
            width: 100%;
            height: 100%;
        }

        .innerdown {
            width: 480px;
            height: 50px;
            /* border: 2px solid black; */
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 25px;
            margin: 30px auto;
            position: relative;
        }

        .ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(255, 192, 203, 0.5);
            position: absolute;
            left: 0;
        }

        .text {
            height: 30px;
            line-height: 30px;
            text-align: center;
            user-select: none;
            font-size: 20px;
        }
    </style>
    <script src="../js/common.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/request.js"></script>
</head>

<body>
    <div class="form">
        <h1>欢迎登录</h1>
        <p>没有账号？<a href="register.html">立即注册</a></p>
        <p>
            <label>账号</label>
            <input class="user" type="text" placeholder="用户名/手机号/邮箱">
            <span class="user_span"></span>
        </p>
        <p>
            <label>密码</label>
            <input class="pwd" type="password" placeholder="请输入密码">
            <span class="pwd_span"></span>
        </p>
        <p class="ckbox"><label><input type="checkbox">是否记住本账号？</label></p>
        <p>
            <button class="btn">登录</button>
        </p>
    </div>
    <!-- 滑动验证 -->
    <div class="outer">
        <div class="innerup">
            <div class="box1"></div>
            <div class="box2">
                <div class="box2-inner"></div>
            </div>
        </div>
        <div class="innerdown">
            <div class="ball"></div>
        </div>
        <div class="text">请将方块滑动至指定位置</div>
    </div>
</body>

<script>
    var form = document.querySelector(".form");
    var userInp = document.querySelector(".user");
    var userSpan = document.querySelector(".user_span");
    var pwdInp = document.querySelector(".pwd");
    var pwdSpan = document.querySelector(".pwd_span");
    var btn = document.querySelector(".btn");
    var checkbox = document.querySelector(".ckbox input");

    var outer = document.querySelector('.outer');
    var innerup = document.querySelector('.innerup');
    var box1 = document.querySelector('.box1');
    var box2 = document.querySelector('.box2');
    var box2Inner = document.querySelector('.box2-inner');
    var innerdown = document.querySelector('.innerdown');
    var ball = document.querySelector('.ball');


    function loadImg() {
        // box2可以随机移动的范围
        var minLeft2 = box2.clientWidth;
        var maxLeft2 = innerup.clientWidth - box2.clientWidth;
        var maxTop2 = innerup.clientHeight - box2.clientHeight;

        box2.style.top = (Math.random() * maxTop2) + "px";
        box2.style.left = (minLeft2 + Math.random() * (maxLeft2 - minLeft2)) + "px";

        box2.style.backgroundImage = "url('../images/2.jpg')";
        box2.style.backgroundSize = '480px 230px';
        box2.style.backgroundPosition = -parseFloat(box2.style.left) + "px " + -parseFloat(box2.style.top) + "px";


        box2Inner.style.backgroundColor = "rgba(0,0,0,0.3)";

        box1.style.backgroundImage = "url('../images/2.jpg')";
        box1.style.backgroundSize = '480px 230px';
        box1.style.backgroundPosition = -parseFloat(box2.style.left) + "px " + -parseFloat(box2.style.top) + "px";

        box1.style.top = box2.style.top;
    }



    var userFlag = false;
    var pwdFlag = false;


    userInp.onfocus = function () {
        // 修改表单被选中后的边框颜色，这个边框不是border，是outline
        userInp.style.outlineColor = "#7C91D7";
    }

    userInp.onblur = function () {
        var lguser = userInp.value;
        userFlag = false;
        if (!lguser) {
            userInp.style.borderColor = "red";
            userSpan.textContent = "用户名不能为空";
            userSpan.style.color = "red";
        } else {
            userSpan.textContent = "";
            userInp.style.borderColor = "#E5E5E5";
            userFlag = true;
        }
    }


    pwdInp.onfocus = function () {
        // 修改表单被选中后的边框颜色，这个边框不是border，是outline
        pwdInp.style.outlineColor = "#7C91D7";
    }

    pwdInp.onblur = function () {
        var pwd = pwdInp.value;
        pwdFlag = false;
        if (!pwd) {
            pwdSpan.textContent = "密码不能为空";
            pwdSpan.style.color = "red";
            pwdInp.style.borderColor = "red";
        } else {
            pwdSpan.textContent = "";
            pwdInp.style.borderColor = "#E5E5E5";
            pwdFlag = true;
        }
    }

    btn.onmousedown = function () {
        this.style.outline = "none";
        this.style.backgroundColor = "#7C91D7";
    }

    btn.onmouseup = function () {
        this.style.backgroundColor = "#BACFFC";
    }

    btn.onclick = function () {
        userInp.onblur();
        pwdInp.onblur();


        if (userFlag && pwdFlag) {

            var name = userInp.value;
            var pwd = pwdInp.value;

            login({ name, password: pwd }).then(
                res => {
                    if (res.status) {
                        userFlag = false;
                        pwdFlag = false;

                        var { status, msg, data: { username, password, phone, email } } = res;
                        userSpan.textContent = "";
                        userInp.style.borderColor = "#E5E5E5";
                        userFlag = true;

                        if (pwd == password) {
                            pwdSpan.textContent = "";
                            pwdInp.style.borderColor = "#E5E5E5";
                            pwdFlag = true;
                        } else {
                            pwdSpan.textContent = "密码输入有误，请重新输入";
                            pwdSpan.style.color = "red";
                            pwdInp.style.borderColor = "red";
                        }

                        if (userFlag && pwdFlag) {

                            form.style.display = "none";
                            outer.style.display = "block";
                            loadImg();
                            ball.onmousedown = function (e) {
                                var e = e || window.event;

                                ball.style.backgroundColor = "pink";

                                // 记录鼠标按下时相对于小球的位置
                                var mouseX = e.offsetX;

                                document.onmousemove = function (e) {
                                    var e = e || window.event;

                                    console.log(innerdown.offsetLeft);
                                    var x = e.clientX - innerdown.offsetLeft - mouseX;
                                    var maxLeft = innerdown.clientWidth - ball.clientWidth;

                                    if (x < 0) x = 0;
                                    if (x > maxLeft) x = maxLeft;

                                    ball.style.left = x + "px";
                                    box1.style.left = ball.style.left;
                                }
                            }

                            document.onmouseup = function (e) {
                                var e = e || window.event;

                                ball.style.backgroundColor = "rgba(255, 192, 203, 0.5)";
                                document.onmousemove = null;

                                var box1Left = parseFloat(box1.style.left);
                                var box2Left = parseFloat(box2.style.left);

                                if (box1Left >= box2Left - 5 && box1Left <= box2Left + 5) {



                                    if (checkbox.checked) {
                                        setCookie("lguser", username, 10);
                                    } else {
                                        setCookie("lguser", username);
                                    }

                                    var search = location.search;

                                    if (search) {

                                        var str = search.split("=")[1];
                                        var url = decodeURIComponent(str);
                                        location.href = url;
                                    } else {

                                        location.href = "index.html";
                                    }

                                    outer.style.display = "none";
                                    form.style.display = "block";
                                    box1.style.left = 0;
                                    ball.style.left = 0;
                                    loadImg();

                                } else {
                                    box1.style.left = 0;
                                    ball.style.left = 0;
                                }
                            }

                            ball.onmouseup = function (e) {
                                var e = e || window.event;

                                ball.style.backgroundColor = "rgba(255, 192, 203, 0.5)";
                                document.onmousemove = null;

                                var box1Left = parseFloat(box1.style.left);
                                var box2Left = parseFloat(box2.style.left);

                                if (box1Left >= box2Left - 5 && box1Left <= box2Left + 5) {


                                    if (checkbox.checked) {
                                        setCookie("lguser", username, 10);
                                    } else {
                                        setCookie("lguser", username);
                                    }

                                    var search = location.search;

                                    if (search) {

                                        var str = search.split("=")[1];
                                        var url = decodeURIComponent(str);
                                        location.href = url;
                                    } else {

                                        location.href = "index.html";
                                    }

                                    outer.style.display = "none";
                                    form.style.display = "block";
                                    box1.style.left = 0;
                                    ball.style.left = 0;
                                    loadImg();

                                } else {
                                    box1.style.left = 0;
                                    ball.style.left = 0;
                                }
                            }


                        }
                    } else {
                        userInp.style.borderColor = "red";
                        userSpan.textContent = "该用户不存在，请重新输入";
                        userSpan.style.color = "red";
                    }

                }
            )

        }

    }




</script>

</html>